<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>书城首页</title>
    <jsp:include page="/pages/common/head.jsp"></jsp:include>
    <link rel="stylesheet" type="text/css" href="static/css/swiper.min.css" />
</head>

<script>
    $(function (){
        //跳到指定的页码
        $("#searchPageBtn").click(function (){
            let pageNo = $("#pn_input").val();

            //location地址栏对象
            //有一个属性叫href,它可以获取浏览器地址栏中的地址
            //href属性可读，可写
            location.href = "${pageScope.basePath}${requestScope.page.url}&pageNo=" + pageNo;
        });

        //给加入购物车按钮绑定单机事件
        $(".addToCart").click(function (){
            const stock = $(this).attr("bookStock");
            //如果库存为0直接返回
            if(stock === 0)  {
                return;
            }
            // location.href = "http://localhost:8089/book/cartServlet?action=addItem&id=" + $(this).attr("bookId");
            //获取bookId
            const bookId = $(this).attr("bookId");
            //发起请求
            $.post("http://localhost:8089/book/cartServlet",{
                action: "ajaxAddItem",
                id: bookId,
            },function (data){
                //获取最后添加的商品名和购物车商品总数
                $(".totalCount").text("您的购物车中有" + data.data.totalCount + "件商品");
                $(".lastAdd").text(data.data.lastAdd);
            },"json")
        })


    });
</script>

<style>
    .swiper-container {
        width: 100%;
        height: 100%;

    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
</style>

<body>

<div id="header">
    <img src="static/img/logo.png" width="150px">
    <div>
        <%--如果用户还没有登录，显示【登录和注册的菜单】--%>
        <c:if test="${empty sessionScope.user}">
            <a href="pages/user/login.jsp">登录</a> |
            <a href="pages/user/regist.jsp">注册</a> &nbsp;&nbsp;
        </c:if>
            <%--如果用户登录了，显示登录后的信息--%>
        <c:if test="${not empty sessionScope.user}">
            <span>欢迎<span class="um_span">${sessionScope.user.username}</span>光临书城</span>
            <a href="orderServlet?action=showMyOrders">我的订单</a>
            <a href="userServlet?action=logout">注销</a>
        </c:if>
        <a href="pages/cart/cart.jsp">购物车</a>
        <a href="pages/manager/manager.jsp">后台管理</a>
    </div>
</div>



<div id="main">
    <div id="book">
        <div class="book_cond">
            <form action="client/bookServlet" method="get">
                <input type="hidden" name="action" value="pageByPrice">
                价格：<input id="min" type="text" name="min" value="${param.min}"> 元 -
                <input id="max" type="text" name="max" value="${param.max}"> 元
                <input type="submit" value="查询"/>
            </form>
        </div>


            <div style="text-align: center">
                <span class="totalCount">您的购物车中有${sessionScope.cart.totalCount}件商品</span>
                <div>
                    您刚刚将<span style="color: red" class="lastAdd">${sessionScope.lastAdd}</span>加入到了购物车中
                </div>
            </div>


        <c:forEach items="${requestScope.page.items}" var="book">
            <div class="b_list">

                <div class="img_div">
                    <img class="book_img" alt="" src="${book.img_path}"/>
                </div>
                <div class="book_info">
                    <div class="book_name">
                        <span class="sp1">书名:</span>
                        <span class="sp2">${book.name}</span>
                    </div>
                    <div class="book_author">
                        <span class="sp1">作者:</span>
                        <span class="sp2">${book.author}</span>
                    </div>
                    <div class="book_price">
                        <span class="sp1">价格:</span>
                        <span class="sp2">￥${book.price}</span>
                    </div>
                    <div class="book_sales">
                        <span class="sp1">销量:</span>
                        <span class="sp2">${book.sales}</span>
                    </div>
                    <div class="book_amount">
                        <span class="sp1">库存:</span>
                        <span class="sp2">${book.stock}</span>
                    </div>
                    <div class="book_add">
                        <button bookId="${book.id}" bookStock="${book.stock}" class="addToCart">加入购物车</button>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>

    <%--静态包含分页条--%>
    <%@include file="/pages/common/page_nav.jsp"%>

</div>

<!-- Swiper -->
<div class="swiper-container" style="width: 1200px">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="static/img/book4.jpg" width="200px">
        </div>
        <div class="swiper-slide">
            <img src="static/img/book5.jpg" width="200px">
        </div>
        <div class="swiper-slide">
            <img src="static/img/book6.jpg" width="200px">
        </div>
        <div class="swiper-slide">
            <img src="static/img/book7.jpg" width="200px">
        </div>
        <div class="swiper-slide">
            <img src="static/img/book8.jpg" width="200px">
        </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<%--静态包含页脚内容--%>
<%@include file="/pages/common/foot.jsp"%>

<script type="text/javascript" src="static/script/swiper.min.js"></script>
<script>
    (function (){
        var swiper = new Swiper('.swiper-container', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    })();
</script>
</body>
</html>